<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="axios/dist/axios.min.js"></script>
</head>
<body>
<div style="width: 100%;height:800px;background-image: url('icon/img.png');background-size: cover;opacity: 1;">
    <!-- 导航栏 -->
    <div style="display: flex">
        <!-- 左侧部分 -->
        <div style="display: flex; margin-left: 50px;">
            <div><img style="width: 50px;height: 50px;margin-top: 50px;" src="icon/logo.png" alt="logo"></div>
            <div style="display: grid;margin-top: 45px;">
                <div style="font-size: 30px;color: white;margin-left: 10px;">链家</div>
                <div style="font-size: 15px;color: white;margin-left: 10px;">让家更美好</div>
            </div>
            <div style="border: 2px solid white; width:78px;height:39px;border-radius: 27px;margin-top: 60px;margin-left: 25px;cursor: pointer;
                    color:white;text-align: center;line-height: 27px;display:flex">
                <img style="width: 20px;height: 20px;margin-top: 10px;margin-left: 10px;" src="icon/位置.png">
                <div style="margin-top: 5px;">芜湖</div>
            </div>
        </div>

        <!-- 中间部分 -->
        <div style="display: flex;color: white;margin-top:65px;margin-left: 250px;font-size: 22px;font-weight: bold;">
            <div>二手房</div>
            <div style="margin-left: 50px;">新房</div>
            <div style="margin-left: 50px;">租房</div>
            <div style="margin-left: 50px;">装修</div>
            <div style="margin-left: 50px;">我是业主</div>
            <div style="margin-left: 50px;">发布房源</div>
            <div style="margin-left: 50px;">房屋估价</div>
            <div style="margin-left: 50px;">发布房源</div>
        </div>

        <!-- 右侧部分 -->
        <div style="display: flex;margin-top:65px;margin-left: 50px;font-size: 22px;font-weight:bold;color: white;">
            <div style="display: flex; cursor: pointer;" onclick="showLoginModal()">
                <img style="width: 30px;height:30px;" src="icon/个人.png">
                <div style="margin-left: 10px;">登陆</div>
            </div>
            <div style="margin-left: 20px; cursor: pointer;" onclick="showRegisterModal()">立即注册</div>
        </div>
    </div>

    <div style="font-size: 35px;color: white;margin-top: 170px;margin-left: 200px;">要找真房源 还是链家全</div>
    <div style="font-size: 70px; font-weight: bold; color: white; margin-top: 7px; margin-left: 200px; text-shadow: 10px 10px 10px rgba(23,22,22,0.5);">
        开始寻找属于你的家
    </div>

    <!-- 登录弹窗 -->
    <div id="loginModal" class="login-modal" style="display: none;">
        <div class="close-icon" onclick="hideLoginModal()"><img style="width: 20px;height: 20px;" src="icon/取消.png" alt=""></div>
        <h2 style="color: white;">用户登录</h2>
        <form id="userLoginForm">
            <label for="phoneNumber"></label>
            <input type="text" id="phoneNumber" name="phoneNumber" placeholder="请输入手机号" required><br><br>
            <label for="password"></label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>
            <button type="submit"  >登录</button>
            <div onclick="showRegisterModal()" style="margin-top: 10px;color: white;cursor: pointer; margin-left: 65%">没有账号？立即注册</div>
            <div onclick="showAdminLoginModal()" style="margin-top: 10px;color: white;cursor: pointer; margin-left: 65%">我是管理员</div>
        </form>
    </div>

    <!-- 注册弹窗 -->
    <div id="registerModal" class="login-modal" style="display: none;">
        <div class="close-icon" onclick="hideRegisterModal()"><img style="width: 20px;height: 20px;" src="icon/取消.png" alt=""></div>
        <h2 style="color: white;">用户注册</h2>
        <form id="userRegisterForm">
            <label for="registerPhone"></label>
            <input type="text" id="registerPhone" name="registerPhone" placeholder="请输入手机号" required><br>
            <label for="registerUsername"></label>
            <input type="text" id="registerUsername" name="registerUsername" placeholder="请输入用户名" required><br>
            <label for="registerPassword"></label>
            <input type="password" id="registerPassword" name="registerPassword" placeholder="请输入密码" required><br>
            <label for="confirmPassword"></label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请确认密码" required><br>
            <button type="submit">注册</button>
            <div onclick="showLoginModal()" style="margin-top: 10px;color: white;cursor: pointer;margin-left: 65%">已有账号？点此登录</div>
        </form>
    </div>

    <!-- 管理员登录弹窗 -->
    <div id="adminLoginModal" class="login-modal" style="display: none;">
        <div class="close-icon" onclick="hideAdminLoginModal()"><img style="width: 20px;height: 20px;" src="icon/取消.png" alt=""></div>
        <h2 style="color: white;">管理员登录</h2>
        <form id="adminLoginForm">
            <label for="adminAccount"></label>
            <input type="text" id="adminAccount" name="adminAccount" placeholder="请输入账号" required><br><br>
            <label for="adminPassword"></label>
            <input type="password" id="adminPassword" name="adminPassword" placeholder="请输入密码" required><br><br>
            <button type="submit">登录</button>
        </form>
    </div>
    <a href="user/homePage.html"></a>
</div>

<!-- JavaScript代码 -->
<script>
    document.getElementById('userLoginForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const phoneNumber = document.getElementById('phoneNumber').value;
        const password = document.getElementById('password').value;

        axios.post('http://localhost:8080/user/login', {
            phoneNumber: phoneNumber,
            password: password
        })
            .then(function(response) {
                if (response.data.code === 1) {
                    localStorage.setItem('token', response.data.data.token);
                    localStorage.setItem('phoneNumber', response.data.data.phoneNumber);
                    localStorage.setItem('userName', response.data.data.userName);
                    localStorage.setItem('userId', response.data.data.userId);
                    localStorage.setItem('avatar', response.data.data.avatar);
                    console.log('登录成功，token：' + response.data.data.token);
                    window.location.href = 'user/homePage.html';

                } else {
                    alert('登录失败：' + response.data.msg);
                }
            })
            .catch(function(error) {
                console.error('请求错误：', error);
                alert('登录请求失败，请稍后再试。');
            });
    });

    document.getElementById('userRegisterForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const registerPhone = document.getElementById('registerPhone').value;
        const registerUsername = document.getElementById('registerUsername').value;
        const registerPassword = document.getElementById('registerPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (registerPassword !== confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }

        axios.put('http://localhost:8080/user/register', {
            phoneNumber: registerPhone,
            userName: registerUsername,
            password: registerPassword
        })
            .then(function(response) {
                if (response.data.code === 1) {
                    alert('注册成功');
                    showLoginModal(); // 显示登录模态框
                } else {
                    alert('注册失败：' + response.data.msg);
                }
            })
            .catch(function(error) {
                console.error('请求错误：', error);
                alert('注册请求失败，请稍后再试。');
            });
    });

    document.getElementById('adminLoginForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const adminAccount = document.getElementById('adminAccount').value;
        const adminPassword = document.getElementById('adminPassword').value;

        axios.post(`http://localhost:8080/admin/login?account=${adminAccount}&password=${adminPassword}`)
            .then(function(response) {
                if (response.data.code === 1) {
                    localStorage.setItem('adminToken', response.data.data.token);
                    localStorage.setItem('adminId', response.data.data.adminId);
                    localStorage.setItem('adminName', response.data.data.adminName);
                    console.log('管理员登录成功，token：' + response.data.data.token);
                    window.location.href = 'admin/index.html';
                } else {
                    alert('管理员登录失败：' + response.data.msg);
                }
            })
            .catch(function(error) {
                console.error('请求错误：', error);
                alert('管理员登录请求失败，请稍后再试。');
            });
    });

    function showLoginModal() {
        document.getElementById('loginModal').style.display = 'block';
        document.getElementById('registerModal').style.display = 'none';
        document.getElementById('adminLoginModal').style.display = 'none';
    }

    function hideLoginModal() {
        document.getElementById('loginModal').style.display = 'none';
    }

    function showRegisterModal() {
        document.getElementById('registerModal').style.display = 'block';
        document.getElementById('loginModal').style.display = 'none';
        document.getElementById('adminLoginModal').style.display = 'none';
    }

    function hideRegisterModal() {
        document.getElementById('registerModal').style.display = 'none';
    }

    function showAdminLoginModal() {
        document.getElementById('adminLoginModal').style.display = 'block';
        document.getElementById('loginModal').style.display = 'none';
        document.getElementById('registerModal').style.display = 'none';
    }

    function hideAdminLoginModal() {
        document.getElementById('adminLoginModal').style.display = 'none';
    }
</script>
</body>
</html>
